import React from 'react'
import { Form, Table, Icon, Tag, Modal, Steps, Button, message, Input, Row, Col, Select, DatePicker, InputNumber, Dropdown, Menu, Badge } from 'antd'
import { DropOption } from 'components'
import styles from './List.less'
import moment from "moment"
import JsBarcode from 'jsbarcode';

const Step = Steps.Step;
const confirm = Modal.confirm
const FormItem = Form.Item;
const Option = Select.Option;

class ModalSelect extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			current: 0,
			value: '',
			bottons: '查看',
			previewVisible: false,
			previewImage: '',

		};
	}
	showReturn() {
		const { showList } = this.props
		showList()
	}
	show(value) {
		const { showList, details, onEdit } = this.props
		const { validateFields, getFieldsValue } = this.props.form
		const params = getFieldsValue()
		params.state = value
		params.id = details.document.application.id
		if (params.opinion == undefined) {
			params.opinion = ''
		}
		params.type = details.document.application.type
		params.documentId = details.document.id
		onEdit(params)

	}
	bottonClick(i) {
		if (document.getElementById(i).style.display != "block") {
			document.getElementById(i).style.display = 'block'
		} else {
			document.getElementById(i).style.display = 'none'
		}
		if (this.state.bottons == '查看') {
			this.setState({ bottons: "隐藏" })
		} else {
			this.setState({ bottons: "查看" })
		}
	}
	imgClick = e => {
		this.setState({ previewVisible: true, previewImage: e.target.src })
	}
	handleCancel = () => {
		this.setState({ previewVisible: false })
	}
	printDiv1 = () => {
		$("div#text2").printArea();
	};
	printDiv = () => {
		// var printContents = document.getElementById(divName).innerHTML;
		// var printContents = refs.divName;

		var printContents = this.printId.innerHTML;
		var originalContents = document.body.innerHTML;

		document.body.innerHTML = printContents;

		window.print();

		document.body.innerHTML = originalContents;

		location.reload()

		// var dom = this.printId
		// var win = window.open('');
		// win.document.write(dom.outerHTML);
		// win.document.write(dom.innerHTML);
		// win.print();
		// win.close();
	}
	// componentDidMount(){
	//     JsBarcode("#barcode", "1")
	// }
	render() {
		const { details, ImgList } = this.props
		const { getFieldDecorator } = this.props.form
		const { previewVisible, previewImage } = this.state
		const formItemLayout = {
			labelCol: { span: 4 },
			wrapperCol: { span: 16 },
		};
		var list = []
		var applyList = []
		var photoPage = []
		var Opinion = []
		var imgs = []
		if (!ImgList) {
			return null
		}
		ImgList.map((item, i) => {
			imgs.push(
				<div style={{ height: 1123, textAlign: "center" }}>
					<img onClick={this.imgClick} src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") + "&" + "sys=1001" + "&sign=" + item.sign + "&timestamp=" + item.timestamp} />
				</div>
			)
		})

		if (details != undefined || details != '') {
			if (!details) {
				return null
			}

			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案年度:{details.document.documentYear}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证事项:{details.document.notarialMatters}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>申请人:{details.document.applyName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档日期:{moment(details.document.createdTime).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证日期:{moment(details.document.notarizationAt).format("YYYY-MM-DD")}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>保管日期:{details.document.storageLife}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案页数:{details.document.pageNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>承办人:{details.document.contractorUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>建档人:{details.document.createdUserName}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>公证号:{details.document.notaryNumber}</li>)
			list.push(<li style={{ width: "33.3%", lineHeight: "40px" }}>档案类型:{details.document.documentType}</li>)

			if (details.document.application != undefined) {
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"创建人"}:{details.document.application.applicantName}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"创建时间"}:{moment(details.document.application.createdTime).format("YYYY-MM-DD HH:mm:ss")}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"审核人"}:{details.document.application.auditorName == '' ? '暂无' : details.document.application.auditorName}</li>)
				applyList.push(<li style={{ width: "50%", lineHeight: "40px" }}>{"审核人"}:
				{details.document.application.state == 0 ?
						<span style={{ marginLeft: 10 }}><Badge status="processing" /><span>申请中</span></span> :
						details.document.application.state == 1 ?
							<span style={{ marginLeft: 10 }}><Badge status="success" /><span>通过</span></span> :
							<span style={{ marginLeft: 10 }}><Badge status="error" /><span>拒绝</span></span>
					}</li>)
				applyList.push(<li style={{ width: "100%", lineHeight: "40px" }}>{"审核意见"}:{details.document.application.opinion}</li>)
			}
			//			var menu = JSON.parse(details.document.basicInfo)
			var pages = details.document.documentBillList
			//			for(let i=0;i<menu.length;i++){
			//				list.push(<li key={i} style={{width:"50%",lineHeight:"40px"}}>{menu[i].name}:{menu[i].value}</li>)
			//			}
			for (let i = 0; i < pages.length; i++) {
				photoPage.push(
					<div>
						<div style={{ display: "flex", justifyContent: "space-between", margin: "10px 20px", background: "#f4f4f4", lineHeight: "50px", borderRadius: 5 }}>
							<span style={{ marginLeft: 10, fontWeight: 600 }}>{i + 1}.{pages[i].name} [{pages[i].billfileList.length}条]</span>
							<div style={{ marginRight: 10 }}>
								<Button type="primary"
									onClick={this.bottonClick.bind(this, i)}
									style={{ border: "1px solid #DDDDDD", marginRight: 10, color: "black", backgroundImage: "linear-gradient(180deg,#fdfdfd 0%,#dddddd 98%)" }}>
									查看
								</Button>
							</div>
						</div>
						<div id={i} style={{ overflow: "scroll", height: "200px", margin: "0 40px", display: "none" }}>
							<div className="clearfix">
								{
									pages[i].billfileList.map((item, i) => {
										// console.log(item.url.split(".")[0].split("-")[1].split("-")[0])
										// if(item.url.split(".")[1] == 'doc'){
										// 	return (
										// 		<a href={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") + "&" + "sys=1001"}>{item.url.split(".")[0].split("-")[1].split("-")[0] || "文件"}</a>
										// 	)
										// }else{
											return (
												<img onClick={this.imgClick} src={"http://file.sip.feelbang.com/files/" + item.url + "?token=" + sessionStorage.getItem("token") + "&" + "sys=1001"} style={{ width: 80, margin: 5 }} />
											)
										// }
										
									})
								}
							</div>

						</div>
					</div>
				)
			}
		}

		return (
			<div>
				<div style={{ marginBootm: 30 }}>
					<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>档案信息:</span>
					<br />
					<ul style={{ display: "flex", flexWrap: "wrap", margin: "0 10px", marginLeft: 40, width: "50%" }}>
						{list}
					</ul>
				</div>
				<div className="listLib">
					<span style={{ fontSize: 20, marginLeft: 20, fontWeight: 600 }}>卷宗目录:</span>
					<div style={{ width: '50%' }}>
						{photoPage}
					</div>

				</div>
				<div style={{ width: "50%" }}>
					{Opinion}
				</div>
				<div ref={self => (this.printId = self)}  id="text2" style={{ display: "none" }}>
					{imgs}
				</div>
				{/* <svg id="barcode"></svg> */}
				<div style={{ width: "50%" }}>
					<Button style={{ width: 200, marginTop: 30, height: 40 }} type="primary" onClick={this.showReturn.bind(this)}>返回</Button>
					<Button style={{ width: 200, marginTop: 30, height: 40, marginLeft: 20 }} type="primary" onClick={this.printDiv}>打印内容</Button>
				</div>
				<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		)
	}


}

export default Form.create()(ModalSelect)
